<template>
	<view>
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{i18n['我的优惠券']}}</block>
			<!-- <block slot="right"><view class="" @tap="handleJump" data-url="/pages/user/coupon/get_coupon/index" >领券中心</view></block> -->
		</fu-custom>
		<!-- 标签栏 start -->
		<fu-tab :tabs="navs" :sticky="true" :scrollspy="true" line-height="6" activeColor="#333"
			lineColor="#FF6F27" @change="tabSelect"></fu-tab>
		<!-- 标签栏 end -->
		<!-- 优惠券列表 start-->
		<!-- <view v-for="(item, index) in listData" :key="index" id="list">
      <view class="coup">
        <view class="items">
          <view class="flex justify-center align-center " :class="[item.status == 1 ? 'addressTrue' : 'addsFrom']">
            <view class="flex flex-direction text-center item-overflow">
              <text class="text-cut color-white money-size">
                <text class="text-price" style="font-size: 24rpx;"></text>
                <text>{{ item.money | filterPrice }}</text>
              </text>
              <text class="font-24 text-cut color-white">{{i18n['满']}}{{ item.min_order_money | filterPrice }}{{i18n['可减']}}</text>
            </view>
          </view>
          <view class="flex margin-left-sm align-center width45 height200">
            <view class="flex flex-direction text-sm line-height">
              <text class="font-28 text-bold">{{ item.coupon_name }}</text>
			  <text class="font-24 text-999 text-cut margin-top-sm" >{{item.content}}</text>
              <text class="text-xs text-666 text-cut margin-top-sm" >{{i18n['有效期至：']}}{{ item.end_time }}</text>
            </view>
          </view>
          <view class="use-btn" @tap="handleClick(item)" :class="[item.status == 1 ? 'ctr' : '']">
            {{ item.status == 1 ? i18n['未使用'] : item.status == 3 ? i18n['未使用'] : i18n['已过期'] }}
            <text v-if="item.status == 1">{{i18n['未使用']}}</text>
              <text v-if="item.status == 3">{{i18n['已使用']}}</text>
              <text v-if="item.status == 4">{{i18n['已过期']}}</text>
          </view>
        </view>
        <view v-if="item.share" class="padding-left">
          <text class="text-xs margin-left-xs">{{ item.content || '' }}</text>
        </view>
      </view>
    </view> -->
		<view class="padding">
			<view v-for="(item, index) in listData" :key="index" class="padding-bottom-sm" @click="handleJump"
				data-url="/pages/user/coupon/use-coupon/index">
        <fu-coupon :discountPrice="item.money" :name="item.coupon_name" :time="item.end_time" :limit="item.min_order_money"
          :isUse="item.is_receive == 1" :isMyCoupon="true" @click="handleClick(item)" :item='item'></fu-coupon>
				<!-- <jd-coupon-new :info="item" @click="receive(item,index,item.coupon.is_receive)">
				</jd-coupon-new> -->
			</view>
		</view>
		<!-- 优惠券列表 end -->
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
      :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
		<!-- 断网检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网检测 end -->
	</view>
</template>

<script>
	// 引入混入js
	import pagingList from '@/common/mixin/paging_list.js';
  import fuCoupon from '../../components/fu-coupon/fu-coupon1.vue';
	import JdCouponNew from '@/pages/goods/components/jd-coupon-new/jd-coupon-new.vue';
	export default {
		mixins: [pagingList], //混入
		components: {
			JdCouponNew,
      fuCoupon
		},
		data() {
			return {
				navs: [{
						status: 1,
						name: global.i18n['全部']
					},
					{
						status: 2,
						name: global.i18n['未使用']
					},
					// { status: 3, name: global.i18n['已使用'] },
					{
						status: 4,
						name: global.i18n['已过期']
					},
				], //标签栏数据
				TabCur: 1, //选中标签栏状态值  默认1 全部
				minixPagingListsApi: global.apiUrls.get_user_coupn, //混入数据接口名
				pageingListApiMethod: 'get' ,//混入获取数据方式
				themeColor:"#B03C31"
			};
		},
		onLoad() {
			this.setNavigationBarTitle(this.i18n['优惠券'])
		},

		methods: {
			/**
			 * @description 混入钩子函数
			 * @param {Object} val入参  混入接口响应返回值
			 */
			pagingListBeforeResponseData(val) {
				var list = {
					list: val.data.data
				};
				return list;
			},
			/**
			 * @description 标签栏选择事件
			 * @param {Object} status 入参 status 1 全部 2 未使用 3 已使用 4 已失效
			 */
			tabSelect(e) {
				// pagingListAllowLoadMore fasle 不允许加载数据
				if (!this.pagingListAllowLoadMore) return false;
				this.TabCur = this.navs[e.index].status;
				// 混入获取数据
				this.pagingListToggle();
			},
			/**
			 * @description 混入钩子函数 进行数据传参
			 */
			pagingListPostData() {
				let {
					navs,
					TabCur
				} = this;
				return {
					type: this.TabCur //获取哪种状态数据
				};
			},
			/**
			 * @description 使用优惠券
			 * @param {Object} item 事件源入参 item.status == 1属于未使用的优惠券 才能跳转使用
			 */
			handleClick(item) {
				if (item.status != 1) return;
				if (item.goods_id != 0) {
					this.$urouter.navigateTo({
						url: '/pages/goods/goodsdetail/goods-detail/index',
						params: {
							goods_id: item.goods_id,
							sku_id: item.sku_id || 0,
						}
					});
				} else if (item.goods_id == 0 && item.cid != 0) {
					this.$urouter.navigateTo('/pages/goods/goods-list/index?cid=' + item.cid);
				} else {
					this.$urouter.navigateTo('/pages/goods/goods-list/index');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
	}
</style>
